 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Prihláste sa</title>
        <!--
        Neviem preco nefunguje, ked odkazem na css cez subory
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />-->
        <style type="text/css">
           
            body{
                    font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
                    background: #fff url(../images/bg.jpg) repeat top left;
                    font-weight: 400;
                    font-size: 15px;
                    color: #1d3c41;
                    overflow-y: scroll;
            }
            
            .container{
                    width: 100%;
                    height: 100%;
                    position: relative;
                    text-align: center;
            }
            
            
            #container_demo{
                    text-align: left;
                    margin: 0;
                    padding: 0;
                    margin: 0 auto;
                    font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
           }
           
           #wrapper{
                    width: 60%;
                    right: 0px;
                    min-height: 560px;	
                    margin: 0px auto;	
                    width: 500px;
                    position: relative;	
            }
           
           #wrapper h1{
                    font-size: 48px;
                    color: rgb(6, 106, 117);
                    padding: 2px 0 10px 0;
                    font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
                    font-weight: bold;
                    text-align: center;
                    padding-bottom: 30px;
            }
            /** For the moment only webkit supports the background-clip:text; */
            #wrapper h1{
                background: -webkit-repeating-linear-gradient(-45deg, 
                    rgb(18, 83, 93) , 
                    rgb(18, 83, 93) 20px, 
                    rgb(64, 111, 118) 20px, 
                    rgb(64, 111, 118) 40px, 
                    rgb(18, 83, 93) 40px);
                    -webkit-text-fill-color: transparent;
                    -webkit-background-clip: text;
            }
            #wrapper h1:after{
                    content: ' ';
                    display: block;
                    width: 100%;
                    height: 2px;
                    margin-top: 10px;
                    background: -moz-linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); 
                    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(147,184,189,0)), color-stop(20%,rgba(147,184,189,0.8)), color-stop(53%,rgba(147,184,189,1)), color-stop(79%,rgba(147,184,189,0.8)), color-stop(100%,rgba(147,184,189,0))); 
                    background: -webkit-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); 
                    background: -o-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); 
                    background: -ms-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); 
                    background: linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); 
            }
            
            #wrapper p{
                    margin-bottom:15px;
            }
            #wrapper p:first-child{
                    margin: 0px;
            }
            #wrapper label{
                    color: rgb(64, 92, 96);
                    position: relative;
            }
            
        </style>
    </head>
    <body>
        <div class="container">
            <section>				
                <div id="container_demo" >
                    <div id="wrapper">
                            <form action = "j_security_check" method="post" autocomplete="on">
                                <h1>Prihlásenie</h1> 
                                <p> 
                                    <label for="username" class="uname">Meno:</label>
                                    <br>
                                    <input name="j_username"  type="text" />
                                </p>
                                <p> 
                                    <label for="password" class="youpasswd"> Heslo: </label>
                                    <br>
                                    <input  name="j_password" type="password"  /> 
                                </p>
                                <p class="login button"> 
                                    <input type="submit" value="Prihlásiť" /> 
				</p>
                                
                            </form>
                    </div>
                </div>
            </section>
        </div>    
    </body>
</html>